<template>
  <md-nav-bar title="登录" />
  <view class="container">
    <md-logo :hasText="false"></md-logo>
    <uni-segmented-control
      :current="data.current"
      :values="data.items"
      @clickItem="onClickItem"
      style-type="text"
      :active-color="data.configInfo?.select_color_text || '#D92121'"></uni-segmented-control>
    <!-- 授权登录 -->
    <view v-show="data.current === 0">
      <!-- :disabled="!data.agree" -->
      <button
        :style="{
          background: data.configInfo.button_color1 || '#d92121',
          color: data.configInfo.button_color1_text || '#ffffff',
        }"
        class="phone-btn btn"
        open-type="getPhoneNumber"
        @getphonenumber="decryptPhoneNumber">
        手机号码一键登录
      </button>
    </view>
    <!-- 手机号登录 -->
    <view v-show="data.current === 1" class="wrap">
      <!-- <view class="title">手机号登录</view> -->
      <view class="m-top-20">
        <uni-easyinput
          v-model="data.value"
          :inputBorder="false"
          :styles="{ borderColor: 'transparent' }"
          primaryColor="#d8dce6"
          placeholder="请输入手机号"
          @input="input" />
      </view>
      <view class="line"></view>
      <view class="m-top-20">
        <md-button
          :color="data.configInfo.button_color1 || '#d92121'"
          :text-color="data.configInfo.button_color1_text || '#ffffff'"
          class="btn"
          title="获取验证码"
          @click="handleSubmit"></md-button>
      </view>
    </view>
    <cc-protocolBox
      :agree="data.agree"
      :protocolArr="data.protocolArr"
      @click="data.agree = !data.agree"
      @protocolClick="protocolClick"></cc-protocolBox>
      <md-read-dialog
        ref="userDialogRef"
        :mask-click="false"
        confirm-text="确定"
        :content="userReadContent"
        :countdown="0"
        :show-tip-area="false"
        :show-cancel="false"
        @confirm="closeUserDialog"
        @cancel="closeUserDialog" />
      <md-read-dialog
        ref="privacyDialogRef"
        :mask-click="false"
        confirm-text="确定"
        :content="privacyReadContent"
        :countdown="0"
        :show-tip-area="false"
        :show-cancel="false"
        @confirm="closePrivacyDialog"
        @cancel="closePrivacyDialog" />
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
// 接口
import { wx_login, mobile_login, send_sms } from '@/api/index';
import MdReadDialog from '@/components/md-ui/components/md-read-dialog/md-read-dialog.vue';
// 工具
// import { regRules } from '@/utils/util';
type MdReadDialogInstance = InstanceType<typeof MdReadDialog>;
const data = reactive<any>({
  current: 0,
  items: ['授权登录', '手机号登录'],
  value: '',
  agree: false,
  protocolArr: ['《用户协议》', '《隐私协议》'],
  wx_code: '',
  configInfo: {},
});
// 用户协议的弹窗
const userDialogRef = ref<MdReadDialogInstance | null>(null);
// 隐私协议的弹窗
const privacyDialogRef = ref<MdReadDialogInstance | null>(null);
// 用户协议的内容
const userReadContent = ref<string>(`一、总则
1. 本协议系您与「泉州环湾文体」小程序之间就使用账号、服务、内容等事项订立的权利义务规范。在开始使用前请务必仔细阅读，若您不同意本协议任一条款，请立即停止使用。
2. 当您勾选或实际使用平台任一服务，即视为已充分阅读并同意受本协议约束。

二、账号注册与使用
1. 您应当使用真实、准确、完整的信息完成注册，并及时更新。您对因资料不实或未及时更新造成的后果承担全部责任。
2. 账号仅限本人使用，未经平台书面许可不得转让、出租、出借或以其他方式交由第三方使用。由于您的原因导致账号或密码泄露而造成的损失由您自行承担。
3. 如平台发现您存在违法违规或违反本协议的行为，有权采取警告、限制功能、冻结账号直至注销等措施。

三、服务使用规范
1. 您在使用平台时不得发布、传播、存储任何违法、侵权、低俗、欺诈或其他违反公序良俗的内容。
2. 禁止以任何方式对平台系统或数据进行反向工程、恶意攻击、未授权爬取、批量抓取等行为。
3. 未经许可，您不得利用平台开展广告推广、商业销售、传销或其他与平台提供服务无关的行为。

四、个人信息与隐私保护
1. 平台将依据相关法律法规以及隐私政策收集、使用、存储和保护您的个人信息。除法律法规另有规定或经您授权，不会向第三方披露。
2. 您理解并同意，为向您提供服务、优化体验及保障安全，平台可能委托合法的第三方机构处理相关信息。

五、内容与知识产权
1. 平台提供的所有内容（包括但不限于文字、图片、音视频、界面设计、数据、代码等）均受到知识产权法保护，未经书面许可不得擅自使用。
2. 您在平台上传、发布的内容，需保证拥有相应权利或已取得合法授权，并授权平台在全球范围内以非独占方式使用、复制、传播、改编、展示等，以便向您及其他用户提供服务。

六、免责声明
1. 平台将尽力保障服务稳定、连续，但受限于现有技术及客观条件，平台不对服务的即时性、绝对安全性作出保证。
2. 因自然灾害、网络故障、政策调整等不可抗力或非平台原因造成的服务中断、数据丢失，平台不承担责任，但将协助处理善后。

七、终止与变更
1. 如您违反本协议或相关法律法规，平台有权无需提前通知而中止或终止全部或部分服务。
2. 平台可根据运营需要适时修改本协议，并在平台上发布。若您在协议更新后继续使用服务，即视为接受新的协议内容。

八、争议解决
1. 本协议的签订、执行与解释均适用中华人民共和国法律。
2. 因履行本协议所产生的争议，应友好协商解决；协商不成的，任一方可向平台所在地有管辖权的人民法院提起诉讼。

如您对本协议有任何疑问，可通过平台公布的联系方式与我们取得联系。感谢您的理解与支持。`);
// 隐私协议的内容
const privacyReadContent = ref<string>(`小程序隐私保护指引

本指引是泉州环湾文体小程序开发者 泉州环湾文化体育投资有限公司（以下简称“开发者”）为处理你的个人信息而制定。

开发者处理的信息：
根据法律规定，开发者仅处理实现小程序功能所必要的信息。
开发者将在获取你的明示同意后，收集你的微信昵称、头像，用途是【用于“我的”中的头像和昵称】
开发者将在获取你的明示同意后，收集你的手机号，用途是【登录或注册】
开发者将在获取你的明示同意后，使用你的相册（仅写入）权限，用途是【用于保存图像编辑器、视频编辑工具等应用中用户创作的最终成果（如图片、视频），便于用户分享或存档。】
开发者将在获取你的明示同意后，收集你的微信运动步数，用途是【用户互动】
开发者将在获取你的明示同意后，收集你的位置信息，用途是【获取用户当前位置】
开发者将在获取你的明示同意后，访问你的摄像头，用途是【进行AR识别】
开发者收集你选中的照片或视频信息，用于修改头像。
开发者收集你选中的文件，用于上传成绩证书，以确定选手成绩。
开发者读取你的剪切板，用于复制网址、邮箱，便于用户使用。

第三方插件信息/SDK信息
为实现特定功能，开发者可能会接入由第三方提供的插件/SDK。第三方插件/SDK的个人信息处理规则，请以其公示的官方说明为准。泉州环湾文体小程序接入的第三方插件信息/SDK信息如下：

第三方插件信息
插件名称：AR图像识别

插件提供方名称: 成都弥知科技有限公司
为了体验AR场景，开发者将在获得你的明示同意后，访问你的摄像头。
为了保存AR场景拍摄的照片到本地相册，开发者将在获得你的明示同意后，使用你的相册（仅写入）权限。
开发者读取你的剪切板，用于方便开发者复制调试数据。
开发者调用你的方向传感器，用于体验AR场景。

第三方SDK信息
SDK名称: Kivicube SLAM AR插件
SDK提供方名称: 思岚科技
开发者访问你的摄像头 ，用于进行AR识别。
未成年人保护
根据相关法律法规的规定，若你是14周岁以下的未成年人，你需要和你的监护人共同仔细阅读本指引，并在征得监护人明示同意后继续使用小程序服务。开发者将根据相关法律法规的规定及本指引内容，处理经监护人同意而收集的未成年人用户信息，并通过【本指引你的权益部分】披露的内容保障未成年人在个人信息处理活动中的各项权利。

你的权益
关于收集你的位置信息、访问你的摄像头，你可以通过以下路径：小程序主页右上角“…”—“设置”—点击特定信息—点击“不允许”，撤回对开发者的授权。
关于收集你的手机号，你可以通过以下路径：小程序主页右上角“...” — “设置” — “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。法律法规另有规定的，开发者承诺将停止除存储和采取必要的安全保护措施之外的处理。
关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
若你在小程序中注册了账号，你可以通过联系客服方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。

开发者对信息的存储
 开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。

信息的使用规则
开发者将会在本指引所明示的用途内使用收集的信息
如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以弹窗方式告知并征得你的明示同意。

信息对外提供
开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。

你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过客服功能与开发者联系；或者向微信进行投诉。
更新日期：2025年11月20日`)
// 关闭用户协议的弹窗
const closeUserDialog = () => {
  // 关闭弹窗
  userDialogRef.value?.close();
};
// 关闭隐私协议的弹窗
const closePrivacyDialog = () => {
  // 关闭弹窗
  privacyDialogRef.value?.close();
};
// 授权手机号回调
function decryptPhoneNumber(e: any) {
  if (!data.agree) {
    uni.showToast({
      icon: 'none',
      title: '请先阅读用户协议和隐私协议',
    });
    return;
  }
  console.log(e.detail); // 动态令牌
  fetchAuthMobileLogin(e.detail.code);
}

function onClickItem(e: any) {
  if (data.current != e.currentIndex) {
    data.current = e.currentIndex;
  }
}

function input(val: string) {
  data.value = val;
}

function protocolClick(tag: string) {
  console.log('点击协议序列 = ' + tag);
  // 用户协议
  if(tag == '0') {
    userDialogRef.value?.open();
  } else {
    // 隐私协议
    privacyDialogRef.value?.open();
  }
}

// 获取验证码
const handleSubmit = () => {
  if (!data.agree) {
    uni.showToast({
      icon: 'none',
      title: '请先阅读用户协议和隐私协议',
    });
    return;
  }
  // const reg = regRules.phone;
  // 判断是否为正确的手机号码
  // if (!reg.test(data.value)) {
  //   uni.showModal({
  //     content: '请输入正确的手机号码',
  //     showCancel: false,
  //   });
  //   return;
  // }
  fetchSendSms(data.value);
};

/**
 * 接口相关
 */

// 授权手机登录
const fetchAuthMobileLogin = async (code: string) => {
  try {
    const res = await mobile_login({
      code,
      wx_code: data.wx_code,
    });
    uni.setStorageSync('token', res.data.token);
    // 返回的页面执行刷新
    uni.setStorageSync('isRefresh', 1);
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 500);
  } catch (e) {
    //TODO handle the exception
  }
};

const fetchSendSms = async (mobile: string) => {
  try {
    await send_sms({
      mobile,
      event: 'mobile_login',
    });
    uni.navigateTo({
      url: `/pages/login/code?phone=${data.value}&wx_code=${data.wx_code}`,
    });
  } catch (error) {}
};

onLoad(() => {
  const configInfo = uni.getStorageSync('configInfo');
  if (Object.keys(configInfo || {})?.length > 0) {
    const parseInfo = JSON.parse(configInfo);
    data.configInfo = parseInfo;
  }
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (res) {
      // console.log(res);
      data.wx_code = res.code;
      uni.setStorageSync('wx_code', res.code);
    },
  });
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  .phone-btn {
    margin: 0;
    width: 694rpx;
    height: 88rpx;
    // background: #d92121;
    border-radius: 20rpx;
    // color: white;
    font-size: 34rpx;
  }
  .title {
    color: $title;
    font-size: $fs-40;
    text-align: center;
    margin-bottom: 60rpx;
  }
  .line {
    height: 1rpx;
    background: #cccccc;
  }
  .btn {
    margin-top: 100rpx;
  }
}
</style>
